import React, { useRef } from 'react'
import Test from './Test'
import Demo from './Demo'
export default function App() {
  // const ref = React.createRef('默认值') // 之前的方式不能写默认值
  const ref1 = useRef('默认值') //新方式,可以写默认值

  // ref对象的current属性是可以被赋值的
  // ref.current = { name: 'zs' }
  // ref1.current = { name: 'zs' }

  return (
    <div>
      App
      <hr />
      {/* 注意: ref对象如果和多个角色进行绑定,会发生覆盖问题 */}
      {/* ref对象和标签进行绑定,则可以获取到标签的真实dom */}
      {/* <h1 ref={ref1}>xxx</h1> */}
      {/* ref对象和类组件绑定,则可以获取到当前类组件的实例 */}
      {/* <Demo ref={ref1}></Demo> */}
      {/* ref对象和函数组件绑定, 无法获取函数组件实例,也拿不到其他东西. 还会警告*/}
      <Test ref={ref1} xxx={123}></Test>
      <button
        onClick={() => {
          // 需求: 点击按钮,要让Test组件中的div标签的字体颜色变成红色
          // console.log(ref1.current)
          ref1.current.style.color = 'red'
        }}
      >
        按钮
      </button>
    </div>
  )
}
